<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>注册</title>
    <link rel="stylesheet" href="../css/bootstrap.css">
    <script src="../js/jquery.min.js"></script>
    <script src="../js/popper.min.js"></script>
    <script src="../js/bootstrap.min.js"></script>
    <script src="../js/vue.js"></script>
    <link rel="stylesheet" href="../css/login.css">
    <link rel="stylesheet" href="../css/comm.css"/>

</head>
<body>
<header>
    <iframe src="header.html" frameborder="0" class="my_header" scrolling="no"></iframe>
</header>
    <div id="app">
        <div class="container">
            <div class="bg-white border w-50" style="margin-top: 8rem">
                <div class="col-12 my-4">
                    <h3 class="text-success">植物交流平台欢迎您</h3>
                </div>
                <div class="col-12 mt-3">
                    <input type="text" class="form-control" placeholder="请输入用户名" v-model="username"/>
                </div>
                <div class="col-12 mt-3">
                    <input type="text" class="form-control" placeholder="请输入昵称" v-model="nick_name"/>
                </div>
                <div class="col-12 mt-3">
                    <input type="password" class="form-control" placeholder="请输入密码" v-model="password"/>
                </div>
                <div class="col-12 mt-1">
                    <input type="password" class="form-control" placeholder="请确认密码" v-model="isPassword" />
                </div>
                <span class="isRep" v-if="isRep" style="text-align: center;">密码不一样</span>
                <div class="col-12 mt-5 mb-3 text-center">
                    <button class="btn btn-primary w-75 " :disabled="!isRegister" @click="regiser">注册</button>
                </div>

            </div>
        </div>
    </div>
</body>
<script>
    new Vue({
        el: "#app",
        data: {
            username:"",// 用户名
            password:"",// 密码
            nick_name:"",// 昵称
            isPassword:"",// 确认密码
            isRep:false,// 确认密码
            isRegister:false// 是否能点击注册
        },
        //网页一进来就调用
        created() {
        
        },
        updated() {
            // 这个是内容改动就调用方法判断两次密码是否都输入一致
            this.passwordRep()
        },
        // 方法全部写在这
        methods: {
            // 注册
            // 这里是我写的东西注册
            async regiser(){
               
                // 判断用户名或者昵称不为空
                if(this.username==""&&this.nick_name==""){
                    alert("请输入名称")
                    return
                }
                // 准备json数据
                const jsonData = {
                    "username":this.username,
                    "password":this.password,
                    "nick_name":this.nick_name
                }
                // 调用post请求
                const response = await fetch('http://localhost:5000/user/register',{
                    method: 'POST', // 指定请求方法为POST  
                    headers: {  
                        'Content-Type': 'application/json', // 设置请求头，指定发送的数据类型为JSON  
                    }, 
                    body: JSON.stringify(jsonData), // 将JavaScript对象转换为JSON字符串作为请求体发送
            
                });
                alert("注册成功")
                setTimeout(function(){
                    window.location.href = "/html/login.html"
                },3000)
            },
            // 判断两次密码是否输入一致
            passwordRep(){
                if(this.password!=""&&this.password!=null&&this.isPassword!=""&&this.isPassword!=null){
                    // 不一致就显示不一致，并且注册按钮不给点击
                    if(this.password!=this.isPassword){
                        this.isRep=true
                        this.isRegister = false
                    }else{// 一致就显示一致，注册按钮可点击
                        this.isRep=false
                        this.isRegister = true
                    }
                }
            },
        
        
        },

    })
</script>
</html>